<template>
  <a-card :bordered="false">
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="柱状图" key="1">
        <a-row>
          <a-col :span="10">
            <a-radio-group :value="barType" @change="statisticst">
              <a-radio-button value="year">按年统计</a-radio-button>
              <a-radio-button value="month">按月统计</a-radio-button>
              <a-radio-button value="category">按类别统计</a-radio-button>
              <a-radio-button value="cabinet">按柜号统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="14">
            <a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
              <a-form-item label="月份区间">
                <a-range-picker
                  :placeholder="['开始月份', '结束月份']"
                  format="YYYY-MM"
                  :value="barValue"
                  :mode="barDate"
                  @panelChange="handleBarDate"/>
              </a-form-item>
              <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>
              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
            </a-form>
          </a-col>
          <bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/>
        </a-row>
      </a-tab-pane>

      <a-tab-pane tab="饼状图" key="2">
        <a-row :gutter="24">
          <a-col :span="10">
            <a-radio-group :value="pieType" @change="statisticst">
              <a-radio-button value="year">按年统计</a-radio-button>
              <a-radio-button value="month">按月统计</a-radio-button>
              <a-radio-button value="category">按类别统计</a-radio-button>
              <a-radio-button value="cabinet">按柜号统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="14">
            <a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
              <a-row :gutter="24">
                <a-form-item label="月份区间">
                  <a-range-picker
                    :placeholder="['开始月份', '结束月份']"
                    format="YYYY-MM"
                    :value="pieValue"
                    :mode="pieDate"
                    @panelChange="handlePieDate"/>
                </a-form-item>
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatepie">查询</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
              </a-row>
            </a-form>
          </a-col>
          <pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'

  export default {
    name: 'ArchivesStatisticst',
    components: {
      ACol,
      Bar,
      Pie
    },
    data() {
      return {
        description: '档案统计页面',
        // 查询条件
        queryParam: {},
        // 数据集
        countSource: [],
        // 柱状图
        barType: 'year',
        barDate: ['month', 'month'],
        barValue: [],
        // 饼状图
        pieType: 'year',
        pieDate: ['month', 'month'],
        pieValue: [],
        // 统计图类型
        tabStatus: 'bar',
        url: {
          getYearCountInfo: '/mock/api/report/getYearCountInfo',
          getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
          getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
          getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo'
        }
      }
    },
    created() {
      let url = this.url.getYearCountInfo
      this.loadDate(url, 'year', {})
    },
    methods: {
      loadDate(url, type, param) {
        getAction(url, param, 'get').then((res) => {
          if (res.success) {
            this.countSource = []
            if (type === 'year') {
              this.getYearCountSource(res.result)
            }
            if (type === 'month') {
              this.getMonthCountSource(res.result)
            }
            if (type === 'category') {
              this.getCategoryCountSource(res.result)
            }
            if (type === 'cabinet') {
              this.getCabinetCountSource(res.result)
            }
          } else {
            var that = this
            that.$message.warning(res.message)
          }
        })
      },
      getYearCountSource(data) {
        for (let i = 0; i < data.length; i++) {
          if (this.tabStatus === 'bar') {
            this.countSource.push({
              x: `${data[i].year}年`,
              y: data[i].yearcount
            })
          } else {
            this.countSource.push({
              item: `${data[i].year}年`,
              count: data[i].yearcount
            })
          }
        }
      },
      getMonthCountSource(data) {
        for (let i = 0; i < data.length; i++) {
          if (this.tabStatus === 'bar') {
            this.countSource.push({
              x: data[i].month,
              y: data[i].monthcount
            })
          } else {
            this.countSource.push({
              item: data[i].month,
              count: data[i].monthcount
            })
          }
        }
      },
      getCategoryCountSource(data) {
        for (let i = 0; i < data.length; i++) {
          if (this.tabStatus === 'bar') {
            this.countSource.push({
              x: data[i].classifyname,
              y: data[i].cntrnocount
            })
          } else {
            this.countSource.push({
              item: data[i].classifyname,
              count: data[i].cntrnocount
            })
          }
        }
      },
      getCabinetCountSource(data) {
        for (let i = 0; i < data.length; i++) {
          if (this.tabStatus === 'bar') {
            this.countSource.push({
              x: data[i].cabinetname,
              y: data[i].cabinetcocunt
            })
          } else {
            this.countSource.push({
              item: data[i].cabinetname,
              count: data[i].cabinetcocunt
            })
          }
        }
      },
      // 选择统计图类别
      callback(key) {
        if (key === '1') {
          this.tabStatus = 'bar'
          this.queryDatebar()
        } else {
          this.tabStatus = 'pie'
          this.queryDatepie()
        }
      },
      // 选择统计类别
      statisticst(e) {
        if (this.tabStatus === 'pie') {
          this.pieType = e.target.value
          this.queryDatepie()
        } else {
          this.barType = e.target.value
          this.queryDatebar()
        }
      },
      // 按月份查询
      queryDatebar() {
        if (this.barValue.length > 0) {
          this.getUrl(this.barType, { startTime: this.barValue[0]._d, endTime: this.barValue[1]._d })
        } else {
          this.getUrl(this.barType, {})
        }
      },
      queryDatepie() {
        if (this.pieValue.length > 0) {
          this.getUrl(this.pieType, { startTime: this.pieValue[0]._d, endTime: this.pieValue[1]._d })
        } else {
          this.getUrl(this.pieType, {})
        }
      },
      searchReset() {
        console.log(this.tabStatus)
        if (this.tabStatus === 'pie') {
          this.pieValue = []
        } else {
          this.barValue = []
        }
        this.getUrl(this.barType, {})
      },
      // 选择请求url
      getUrl(type, param) {
        let url = ''
        if (type === 'year') {
          url = this.url.getYearCountInfo
        }
        if (type === 'month') {
          url = this.url.getMonthCountInfo
        }
        if (type === 'category') {
          url = this.url.getCntrNoCountInfo
        }
        if (type === 'cabinet') {
          url = this.url.getCabinetCountInfo
        }
        this.loadDate(url, type, param)
      },
      // 选择月份日期
      handleBarDate(value, mode) {
        this.barValue = value
        this.barDate = [
          mode[0] === 'date' ? 'month' : mode[0],
          mode[1] === 'date' ? 'month' : mode[1]
        ]
      },
      handlePieDate(value, mode) {
        this.pieValue = value
        this.pieDate = [
          mode[0] === 'date' ? 'month' : mode[0],
          mode[1] === 'date' ? 'month' : mode[1]
        ]
      }
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }
</style>
